<!DOCTYPE html>
<html style="height: 100%">
<header>
    <meta charset="utf-8">
</header>
 <script src="../lib/ajaxWms.js"></script>
 <style>

       body { font-family: '宋体', 'Lucida sans', Arial;font-size: 16px;background-color:#4d4d4d;color:#eee  ;overflow: hidden;}
	  .slable{width:70%;float:left;text-align:left ;height:25px}
    .svalue{width:25%;float:left;text-align:left ;height:25px;font-weight:bolder}
		.aaa{width:30%;float:left;padding:10px;height:135px; border:1px solid #666}
  </style>
<body style="height: 98%; margin: 0;">
	<div style="border:0px solid #fff;margin:10px">
			 <div style="height:50px;width:90%;text-align:center;margin:0 auto">
							<div style="font-size: 50px;"id="detailName">
								
								
						</div>
							
				
				
			</div>
<button type="button"  onclick="add(-1)"  >前一天</button>
<button type="button"  onclick="add(1)">后一天</button>
    <div id="container" ></div>
    
</div>
    <script type="text/javascript" src="../lib/echarts.min.js"></script>
    <script type="text/javascript">
    	
    	 	height=parseInt(window.innerHeight-100)
    	
 
        var dom = document.getElementById("container");
        dom.style.height=height+"px"
        var myChart = echarts.init(dom);
        var app = {};
        var option;
     
        var datav = [];
        var datai = [];
        var datatmp = [];
       
        option = {
           
            grid: {
					    left: '3%',
					    right: '4%',
					    bottom: '3%',
					    containLabel: true
					  },
            tooltip: {
                trigger: 'axis',
               
                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                }
            },
            yAxis: [
            {
                type: 'value',
                 
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                },
                max:50
               
            },{
                type: 'value',
             
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                },
                max:5
               
            },
            {
                type: 'value',
           
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                },
                max:100
               
            }],
            series: [{
                name: '电压',
                type: 'line',
                    yAxisIndex: 0,
                showSymbol: true,
                hoverAnimation: true,
                lineStyle:{color:"blue"},
                symbol: 'none',
                sampling: 'lttb',
                data: datav
            },
            {
                name: '电流',
                type: 'line',
                    yAxisIndex: 1,
                showSymbol: true,
                hoverAnimation: true,
                lineStyle:{color:"green"},
                symbol: 'none',
                sampling: 'lttb',
                data: datai
            },
            {
                name: '温度',
                type: 'line',
                   yAxisIndex: 2,
                showSymbol: true,
                hoverAnimation: true,
                lineStyle:{color:"yellow"},
                symbol: 'none',
                sampling: 'lttb',
                data: datatmp
            }
            
            
            ]
        };

      

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
        function  add(t){
        	
        	nowDate=new Date(nowDate.getTime()+t*24*3600*1000);
        	
        	  document.getElementById("detailName").innerHTML=ailen+getyyyyMMdd(nowDate)+"统计分析"
        	dataBegin="";
        	datav = [];
          datai = [];
          datatmp = [];
        }
        var dataBegin="";
        var s= decodeURI(window.location.search.substring(1));
        var nowDate=new Date();
        var ailen= s.split("_")[1]
    		 s=s.split("_")[0]
      document.getElementById("detailName").innerHTML=ailen+getyyyyMMdd(nowDate)+"统计分析"
        
        function getyyyyMMdd(d){
				    
				    var curr_date = d.getDate();
				    var curr_month = d.getMonth() + 1; 
				    var curr_year = d.getFullYear();
				    String(curr_month).length < 2 ? (curr_month = "0" + curr_month): curr_month;
				    String(curr_date).length < 2 ? (curr_date = "0" + curr_date): curr_date;
				    var yyyyMMdd = curr_year + "" + curr_month +""+ curr_date;
				    return yyyyMMdd;
				} 
        
       var chart1Requst= {
       			urlBase:"/api/log/allList/z",
		       	perFun:function(){
		       		
			       	this.url=this.urlBase+getyyyyMMdd(nowDate)+"/"+dataBegin+"/code/eq/"+s
			       	return true;
		       	},
		       	fun:function(d){
		       		 var rs=d.data
		       			updateEchart(rs)
		       			if(rs.length>0){
		       					dataBegin=rs[rs.length-1].time;
		       				}
		       		
		        }
		     }
        
        
       function  updateEchart( arr){
       			var len  = arr.length
	       		for(var i=0;i<len;i++){
	       			var v=arr[i]
	       			var keyDate=new Date(v.name-8*3600*1000);
	       			datav.push({name:v.time,value:[v.time,v.v1]});
	       			datai.push({name:v.time,value:[v.time,v.i]});
	       			datatmp.push({name:v.time,value:[v.time,v.tmp]});
	       		}
           
       			myChart.setOption({
                series: [{
                    data: datav
                },
                {
                    data: datai
                },
                {
                    data: datatmp
                }]
            });
       	
       	}
     	this.requestArray.push(chart1Requst);
 
 
    </script>
</body>

</html>
 